<!-- AI模板 -->
<template>
  <div class="dashboard-editor-container">
    <div class="xxx" style="margin-top: 10px;">
      <div style="display:flex;justify-content:space-between;">
        <partitionTree :nodeData="nodeData" :defaultProps="defaultProps" :dialogName="'进程分类'" @handleNodeClick="handleNodeClick" @submitTemplete="submitTemplete" @deleteNode="deleteNode" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree>
        <div :style="{ width:containerWidth}"  class="box" style="background:#fff;padding:20px;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
          <el-button type="primary" @click="addModer">添加进程</el-button>
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="730">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <el-table-column label="进程分类" prop="Class" align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="进程名称" prop="Name"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="执行文件名" prop="ExeName"  align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="210px" align="left" fixed="right" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="changeModer(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteModer(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="moderVisible"
      :title="Action === 1 ? '添加进程' : '修改进程'" 
      v-el-drag-dialog @close="Moder = {}" width="30%">
      <el-form label-width="100px" :rules="rules" :model="Moder" ref="Moder">
        <el-form-item label="执行文件" prop="ExeName">
          <el-input placeholder="请输入执行文件"  :disabled="Action === 2" oninput="value=value.replace(/[^0-9a-zA-Z.]/g,'')" maxlength="32" v-model="Moder.ExeName"></el-input>
        </el-form-item>
        <el-form-item label="进程分类" prop="Class">
          <el-select v-model="Moder.Class" placeholder="请选择进程分类" style="width:100%">
            <el-option  v-for="item in partitionList" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进程名称" prop="Name">
          <el-input placeholder="请输入进程名称" maxlength="16"  v-model="Moder.Name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
import elDragDialog from "@/directive/el-drag-dialog"; 
import partitionTree from "@/components/partitionTree"; 
export default {
  directives: { elDragDialog },
  components: {
    partitionTree
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      containerWidth: 'calc(100% - 240px)',
      tableData: [],
      nodeData: [],
      defaultProps: {
        children: 'Class',
        label: 'Name',
        Count: 'Count'
      },
      Action: 1,
      Moder: {},
      moderVisible: false,
      reSource: [],
      partitionList: [],
      rules:{
        Name: [
          {required: true, message: '请输入进程名称', trigger: 'blur'}
        ],
        Class: [
          {required: true, message: '请选择进程分类', trigger: 'change'}
        ],
        ExeName: [
          {required: true, message: '请输入执行文件', trigger: 'blur'}
        ]
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async getData() {
      const res = await connrequest('GetDictProcTree')
      let partitionList = []
      res.Data.Name = res.Data.RootName //因为后端返回的所有分区名字叫RootName，子菜单又叫Name, 这里做个转换
      res.Data.disabled = true
      res.Data.edit = false
      res.Data.Class.map(item => {
        item.edit = false
        partitionList.push(item)
      })
      this.nodeData = [res.Data]
      this.partitionList = partitionList
      this.GetDictArea(this.PrimName)
    },
    async GetDictArea(Name){
      const data = {
        Filter:{
          Name: Name || ''
        }
      }
      const res = await connrequest('GetDictProc', data)
      this.tableData = res.Data
      if(Name === '' || Name === undefined){  //获取所有编码
        let partitionNumber = []
        res.Data.map(item => {
          partitionNumber.push(item.AreaCode)
        })
        this.partitionNumber = partitionNumber
      }
    },
    handleNodeClick(nodeData){
      const {data} = nodeData
      let PrimName = data.Name === '所有进程' ? '' : data.Name
      this.PrimName = PrimName
      this.$set(this.Moder, 'PrimArea', PrimName)
      this.GetDictArea(PrimName)
    },
    async submitTemplete(node){
      const data = {
        Data:{
          Action: node.Action,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictProcTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success(node.Action === 1 ? '新增成功' : '修改成功')
        this.$refs.partitionTree.moderVisible = false
        this.getData()
      }
    },
    async deleteNode(node){
      if(node.Count > 0){
        this.$message.error('该进程下还有数据，请清空后再删除')
        return
      }
      const data = {
        Data:{
          Action: 3,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictProcTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success('删除成功')
        this.getData()
      }
    },
    addModer(){
      this.Action = 1
      this.Moder = {PrimArea: this.PrimName || this.partitionList[0]?.PrimName}
      this.$nextTick(() => {
        this.$refs.Moder.clearValidate();
      })
      this.moderVisible = true
    },
    changeModer(row){
      this.Action = 2
      this.Moder = {...row}
      this.moderVisible = true
    },
    deleteModer(row){
      this.$confirm('此操作将永久删除该进程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data: {
            Action: 3,
            Detail: {...row}
          }
        }
        const res = await connrequest('EditDictProc', data)
        if(res.Status.StatusCode === 0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async submit(){
      this.$refs['Moder'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              Action: this.Action,
              Detail: {...this.Moder}
            }
          }
          const res = await connrequest('EditDictProc', data)
          if(res.Status.StatusCode === 0){
            this.$message.success(this.Action === 1 ? '新增成功' : '修改成功')
            this.moderVisible = false
            this.getData()
          }
        }
      })
    },
    toggleVisibility(isHidden) {
      if(isHidden)
        this.containerWidth = '100%';
      else 
        this.containerWidth = 'calc(100% - 240px)';
    },
  }
};
</script>
<style scoped>
.box {
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡动画 */
}

</style>
